<template>
  <div>

    <van-overlay :show="isShow" @click="closeList">
      <div class="wrapper" @click.stop>
        <div class="main">
          <div class="title">{{ $t('我的奖品')}}<van-icon @click="closeList" name="cross" /></div>
          <div class="btn">
              <button @click="change(2)" :class="active===2 ? 'active':'not' ">{{ $t('全部') }}</button>
              <button @click="change(0)" :class="active===0 ? 'active':'not' ">{{ $t('Notwinning') }}</button>
              <button @click="change(1)" :class="active===1 ? 'active':'not' ">{{ $t('Alreadywon') }}</button>
          </div>
          <div v-if="loading" style="width: 100%;display: flex;justify-content: center;align-items: center;height: 200px">
            <van-loading type="spinner" color="#1989fa" size="48"/>
          </div>
          <div v-else class="list">
              <van-empty v-if="list.length<1" description="No data available at the moment" />
              <div v-else  v-for="(item,index) in list" :key="index" class="item">
                <div class="left">
                  <img :src="/http/.test(item.prizeImage) ? item.prizeImage : baseURL+item.prizeImage" alt="">
                </div>
                <div class="right">
                    <p class="title_item">
                      <span>{{ item.userName }}</span>
                      <van-tag v-if="item.isPrize===0" type="danger" size="large">{{ $t('Notwinning') }}</van-tag>
                      <van-tag v-else type="success" size="large">{{ $t('Alreadywon') }}</van-tag>
                    </p>
                    <p class="content">
                      {{ item.prizeName }}
                    </p>
                </div>
              </div>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>


<script>
import Vue from 'vue';
import { Icon,Tag,Overlay,Empty } from 'vant';
import {lotteryRecord} from "@/api/apiFox";

Vue.use(Tag);
Vue.use(Icon);
Vue.use(Overlay);
Vue.use(Empty);
export default {
  props:['isShow'],
  data() {
    return {
      active:2,
      baseURL:process.env.VUE_APP_API_ROOT,
      list:[],
      listTable:[],
      loading: true
    }
  },
  methods:{
    getRecodes(){
      lotteryRecord().then(res=>{
        this.loading = false
          this.list = res
          this.listTable=res
      }).catch(err=>{
        this.loading = false
        this.list = this.listTable=[]
      })
    },
    change(e){
      switch (e){
        case 2:{
          this.active=2
          this.list  = this.listTable
          break
        }
        case 1:{
          this.list  = this.listTable
          this.active =1
          this.list = this.list.filter(value => value.isPrize === 1)
          break
        }
        case 0:{
          this.list  = this.listTable
          this.active =0
          this.list = this.list.filter(value => value.isPrize === 0)
          break
        }
      }
    },

    closeList(){
      this.$emit('closeList',true)
    }
  },

  watch:{
    isShow(newValue,oldValue){
      if (newValue){
        this.active=2
        this.loading = true
        this.getRecodes()
      }
    }
  }
}
</script>


<style scoped lang="scss">
  .wrapper{
    width: 100%;
    min-height: 100vh;
    background: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5%;
    box-sizing: border-box;
    .main{
      width: 100%;
      min-height: 200px;
      background: #fff;
      padding: 3%;
      box-sizing: border-box;
      border-radius: 15px;
      .title{
        border-left: 5px solid #2080e5;
        font-size: 16px;
        color: #333333;
        text-indent: 15px;
        display: flex;
        justify-content: space-between;
      }
      .btn{
        width: 100%;
        min-height: 25px;
        margin-top: 15px;
        //text-align: right;
        .not{
          background: #eee;
          color: #333;
          font-size: 14px;
          padding: 0 5px;
          min-width: 60px;
          height: 28px;
          border-radius: 5px;
          box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0;
          border: none;
          margin: 0 5px;
        }
        .active{
          background: #FFB800;
          color: #fff;
          font-size: 14px;
          padding: 0 5px;
          min-width: 60px;
          height: 28px;
          margin: 0 5px;
          border-radius: 5px;
          box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
          border: none;
        }
      }
      .list{
        margin-top: 20px;
        width: 100%;
        overflow: scroll;
        height: 400px;
        .item{
          margin-top: 10px;
          width: 100%;
          min-height: 60px;
          border-radius: 10px;
          //border: 1px solid #f6f6f6;
          display: flex;
          justify-content: space-between;
          box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
          .left{
            width: 60px;
            height: 60px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            img{
              width: 60px;
              height: 60px;
              border-radius: 8px;
            }
          }
          .right{
            width: 80%;
            height: 60px;
            padding: 5px 15px;
            box-sizing: border-box;
            .title_item{
              width: 100%;
              height: 20px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 12px;
              span{
                font-size: 14px;
              }
            }
            .content{
              height: 30px;
              width: 100%;
              font-size: 14px;
              line-height: 30px;
              color: rebeccapurple;
            }
          }
        }
      }
    }
  }
</style>
